<style>
  form.upload-form {
    background: #fdf9f3;
    background: var(--theme-container-accent-background, #fdf9f3);
    max-width: 590px;
    margin: 20px auto;
    padding: 40px 10px;
    border: 2px solid #4e57ef;
    box-shadow: 4px 5px 0px #4e57ef;
  }
</style>
<center style="margin-top:200px">
  <%= stylesheet_link_tag "s3_direct_upload", media: "all" %>
  <h1><%= t("views.videos.upload") %></h1>
  <%= s3_uploader_form callback_url: "/videos",
                       callback_method: "POST",
                       callback_param: "article[video]",
                       key: "video-upload__#{SecureRandom.hex}",
                       key_starts_with: "video-upload__",
                       acl: "public-read",
                       max_file_size: (current_user.super_admin? ? 20_000 : 6000).megabytes,
                       id: "s3-uploader",
                       class: "upload-form",
                       data: { key: :val } do %>
    <%= file_field_tag :file, accept: "video/mp4,video/x-m4v,video/*" %>
    <script id="template-upload" type="text/x-tmpl">
    <div id="file-{%=o.unique_id%}" class="upload">
      {%=o.name%}
      <div class="progress"><div class="bar" style="width: 0%"></div></div>
      <br/><br/><br/>
    </div>
    </script>
  <% end %>
  <div style="margin:50px auto;max-width:80%;font-size:0.86em;">
    <p>
      <%= t("views.videos.beta_html", contact: t("contact_prompts.if_any_questions_html")) %>
    </p>
  </div>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
  integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<%= javascript_include_tag "s3_direct_upload" %>
<script>
  setTimeout(function () {
    $("#s3-uploader").S3Uploader({
      additional_data: {authenticity_token: "<%= form_authenticity_token %>"}
    })
  }, 1000)
</script>
